<template>
  <div class="mid">
    <div v-if="debris.debris1" class="debris debris1">
      <img src="@/assets/childrenDay/puzzle/12/1.png" alt="" />
      <div v-if="debris.debris1 > 1" class="tag">{{ debris.debris1 }}</div>
    </div>
    <div v-if="debris.debris2" class="debris debris2">
      <img src="@/assets/childrenDay/puzzle/12/2.png" alt="" />
      <div v-if="debris.debris2 > 1" class="tag">{{ debris.debris2 }}</div>
    </div>
    <div v-if="debris.debris3" class="debris debris3">
      <img src="@/assets/childrenDay/puzzle/12/3.png" alt="" />
      <div v-if="debris.debris3 > 1" class="tag">{{ debris.debris3 }}</div>
    </div>
    <div v-if="debris.debris4" class="debris debris4">
      <img src="@/assets/childrenDay/puzzle/12/4.png" alt="" />
      <div v-if="debris.debris4 > 1" class="tag">{{ debris.debris4 }}</div>
    </div>
    <div v-if="debris.debris5" class="debris debris5">
      <img src="@/assets/childrenDay/puzzle/12/5.png" alt="" />
      <div v-if="debris.debris5 > 1" class="tag">{{ debris.debris5 }}</div>
    </div>
    <div v-if="debris.debris6" class="debris debris6">
      <img src="@/assets/childrenDay/puzzle/12/6.png" alt="" />
      <div v-if="debris.debris6 > 1" class="tag">{{ debris.debris6 }}</div>
    </div>
    <div v-if="debris.debris7" class="debris debris7">
      <img src="@/assets/childrenDay/puzzle/12/7.png" alt="" />
      <div v-if="debris.debris7 > 1" class="tag">{{ debris.debris7 }}</div>
    </div>
    <div v-if="debris.debris8" class="debris debris8">
      <img src="@/assets/childrenDay/puzzle/12/8.png" alt="" />
      <div v-if="debris.debris8 > 1" class="tag">{{ debris.debris8 }}</div>
    </div>
    <div v-if="debris.debris9" class="debris debris9">
      <img src="@/assets/childrenDay/puzzle/12/9.png" alt="" />
      <div v-if="debris.debris9 > 1" class="tag">{{ debris.debris9 }}</div>
    </div>
    <div v-if="debris.debris10" class="debris debris10">
      <img src="@/assets/childrenDay/puzzle/12/10.png" alt="" />
      <div v-if="debris.debris10 > 1" class="tag">{{ debris.debris10 }}</div>
    </div>
    <div v-if="debris.debris11" class="debris debris11">
      <img src="@/assets/childrenDay/puzzle/12/11.png" alt="" />
      <div v-if="debris.debris11 > 1" class="tag">{{ debris.debris11 }}</div>
    </div>
    <div v-if="debris.debris12" class="debris debris12">
      <img src="@/assets/childrenDay/puzzle/12/12.png" alt="" />
      <div v-if="debris.debris12 > 1" class="tag">{{ debris.debris12 }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
// 控制拼图与拼图数量显示隐藏 0 隐藏 1显示拼图 大于1显示拼图并且显示拼图数量tag
const debris = ref({
  debris1: 0,
  debris2: 0,
  debris3: 0,
  debris4: 0,
  debris5: 0,
  debris6: 0,
  debris7: 0,
  debris8: 0,
  debris9: 0,
  debris10: 0,
  debris11: 0,
  debris12: 0,
})
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

// 拼图碎片显示隐藏匹配逻辑
watch(
  () => props.data,
  (value) => {
    for (const i in debris.value) {
      let temp = ''
      if (i.length > 7) {
        temp = i.substr(6, 2)
      } else {
        temp = i.substr(6, 1)
      }
      temp = parseInt(temp)
      for (let j = 0; j < value.puzzle_pieces.length; j++) {
        if (value.puzzle_pieces[j].no === temp) {
          debris.value[i] = value.puzzle_pieces[j].num
        }
      }
    }
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
